<template>
  <div class="register">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      欢迎注册
    </van-divider>
    <van-form >
      <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' },
            {pattern: /^1[356789]\d{9}$/,message:'手机号格式错误'}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-form>
      <div style="margin: 16px ;" >
        <van-button  round block type="info" native-type="submit" @click="register()">注册</van-button>
        <van-button class="anniu"  round block type="info" native-type="submit" @click="login()">去登录</van-button>
      </div>
    <!-- <mt-field class="zhuce" label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-button type="primary" size="large" @click.native="register()">注册</mt-button> -->
  </div>
</template>

<script>
import url from '../tools/url'
import { Toast } from 'mint-ui';
export default {
  name: 'Register',
  data () {
    return {
      phone:"",
      password:"",
      
    }
  },
  methods: {
      register(){
          var str = `phone=${this.phone}&password=${this.password}`;
          this.axios.post("api3"+url.REGISTER,str).then(res=>{
              console.log(res);
              if(res.data.code==200){
                  Toast(res.data.message);
                  this.$router.push("/login");
              }else{
                  Toast(res.data.message);
                  // this.$router.push("/login");
              }
          })
      },
      login(){
        this.$router.push("/login")
      },
      // onSubmit(){

      // }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.anniu{
  margin-top: 16px;
}
</style>
